<template>
  <div class="flex flex-col">
    <div class="flex flex-row">
      <div class="w-25 leading-8">地图名称：</div>
      <el-input class="w-50" v-model="value" />
      <el-button @click="onClickRefresh()">查找</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="地图名" min-width="180">
      </el-table-column>
      <el-table-column
        prop="id"
        label="地图ID"
        min-width="180"
      ></el-table-column>
    </el-table>
    <el-pagination
      class="mt-3 justify-end"
      layout="prev, pager, next"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @update:current-page="updatePageNum"
      @size-change="updatePageSize"
    />
  </div>
</template>

<script lang="ts" setup>
import request from "@/request";
import { ElInput } from "element-plus";
import { ref } from "vue";

const value = ref("");

const tableData = ref([]);
const loading = ref<Boolean>(false);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getData = async (param: { pn?: number; ps?: number; like?: string }) => {
  loading.value = true;

  const { pn = pageNum.value, ps = pageSize.value, like = value.value } = param;

  const form = {
    pageNum: pn,
    pageSize: ps,
    like: like,
  };

  let result = await request.post("/mapManage/maps", form).catch((error) => {
    console.log(error);
  });
  if (!(result.data instanceof Object)) {
    loading.value = false;
    return;
  }
  if (Array.isArray(result.data.data)) {
    const dataRaw = result.data.data as any[];
    const json = dataRaw.map((item, index) => ({
      ...item,
      vue_id: index,
    }));
    tableData.value = json;
    pageNum.value = result.data.pageNum;
    pageSize.value = result.data.pageSize;
    total.value = result.data.total || 0;
  }
  loading.value = false;
};

const updatePageNum = (newValue: number) => {
  pageNum.value = newValue;
  getData({
    pn: newValue
  });
};
const updatePageSize = (newValue: number) => {
  pageSize.value = newValue;
  getData({
    ps: newValue
  });
};

const onClickRefresh = () => {
  getData({});
};
</script>